<template>
  <div class="inventoryPosting">
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :search-son="searchSon"
          :msg="tacitly"
          @seek="collect"
          @hand="handleQuerySonClass"
        />
        <el-button type="primary" class="btn" size="mini" @click="handleQuerySonClass">{{ $t('btn.search') }}</el-button>
        <el-button type="primary" size="mini" @click="handleExport">{{ $t('btn.toExcel') }}</el-button>
        <filtration
          :ftype="ftype"
          :msg="tacitly"
          :select-data="selectData"
          :table-header="tableHeader1"
          :detail-header="tableHeader"
          @seachData="handleQuerySonClass"
        />
      </div>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        sortable
        :get-summaries="getSummaries"
        show-summary
      >
        <el-table-column :label="$t('market.info')" align="center">
          <el-table-column :label="$t('market.putStoageDate')" prop="instockDate" align="center" />
          <el-table-column :label="$t('menu.marketManage')" prop="salBillNo" align="center" width="100" />
          <el-table-column :label="$t('market.paezText1')" prop="salKhddh" align="center" width="100" />
          <el-table-column :label="$t('menu.collect')" prop="moBillNo" align="center" width="100" />
          <el-table-column :label="$t('market.fmaterial')" prop="fnumber" align="center" width="110">
            <template slot-scope="scope">
              <el-link type="primary" @click="jumpMateriel(scope.row)">
                {{ scope.row.fnumber }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.fmodel')" prop="fmodel" align="center" width="110" />
          <el-table-column :label="$t('market.fdescripTion')" prop="fdescription" show-overflow-tooltip align="center" width="200" />
          <el-table-column :label="$t('market.orderqty')" prop="planQty" align="center" />
          <el-table-column :label="$t('market.currentQty')" prop="realQty" align="center" width="100" />
          <el-table-column :label="$t('market.instockPrice')" prop="instockPrice" align="center" />
          <el-table-column :label="$t('market.currentAmount')" prop="instockAmount" align="center" width="100" />
        </el-table-column>
        <el-table-column :label="$t('market.planGross')" align="center">
          <el-table-column :label="$t('market.planWages')" prop="planWages" align="center" />
          <el-table-column :label="$t('market.planMaterialCost')" prop="planMaterialCost" align="center" />
          <el-table-column :label="$t('market.planMoutCost')" prop="" align="center" />
          <el-table-column :label="$t('market.planGross')" prop="" align="center" />
        </el-table-column>
        <el-table-column :label="$t('market.practicalGross')" align="center">
          <el-table-column :label="$t('market.realWages')" prop="realWages" align="center" />
          <el-table-column :label="$t('market.realMaterialCost')" prop="realMaterialCost" align="center" />
          <el-table-column :label="$t('market.realoutCost')" prop="" align="center" />
          <el-table-column :label="$t('market.practicalGross')" prop="" align="center" />
        </el-table-column>
        <el-table-column :label="$t('market.difference')" align="center">
          <el-table-column :label="$t('market.pieceWage')" prop="distinctWages" align="center" />
          <el-table-column :label="$t('market.distinctMateria')" prop="distinctMaterialCost" align="center" />
          <el-table-column :label="$t('market.subcontract')" prop="" align="center" />
        </el-table-column>
        <el-table-column :label="$t('market.exceptionTypes')" prop="" align="center" />
        <el-table-column :label="$t('market.note')" prop="" align="center" />
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="handleGetUntreated"
      />
    </div>
  </div>
</template>

<script>
import {
  queryPrdPlanAndRealReport
} from '@/api/financial/salesMargin'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel2'
import filtration from '@/components/filtration'
export default {
  name: 'GrossAnalysis',
  components: {
    search,
    filtration
  },
  mixins: [searData],
  data() {
    return {
      ftype: 41,
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      tableHeight: '73vh',
      // 表头
      tableData: [], // 销售数据
      tableHeader: [],
      tableHeader1: []
    }
  },
  created() {
    this.handleGetUntreated()
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 240px)' : '73vh'
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const multiHeader = [['基础信息', '', '', '', '', '', '', '', '', '', '',
          '计划毛利', '', '', '', '实际毛利', '', '', '', '差异', '', '', '异常类型', '备注'],
        [
          '入库日期', '销售订单', this.$t('market.paezText1'), '生产订单', '物料编号', '助记码', '物料描述', '计划数量', '本期入库(数量)',
          '入库单价', '本期入库(金额)', '计划计件工资', '计划领用材料', '计划委外加工', '计划毛利', '实际计件工资', '实际领用材料',
          '实际委外加工', '实际毛利', '计件工资', '领用材料', '委外加工', '异常类型', '备注'
        ]]
        const tHeader = []
        const filterVal = [
          'instockDate', 'salBillNo', 'salKhddh', 'moBillNo', 'fnumber', 'fmodel', 'fdescription',
          'planQty', 'realQty', 'instockPrice', 'instockAmount', 'planWages', 'planMaterialCost',
          '', '', 'realWages', 'realMaterialCost', '', '', 'distinctWages', 'distinctMaterialCost', '', '', ''
        ]
        const merges = [
          'A1:K1',
          'L1:O1',
          'P1:S1',
          'T1:V1',
          'W1:W2',
          'X1:X2'
        ]
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          queryPrdPlanAndRealReport({
            pageSize: 100000,
            pageNum: 1,
            search: this.searCollData
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.list
              const data = formatJson(filterVal, list)
              export_json_to_excel({ multiHeader, header: tHeader, data, merges, filename: '毛利分析表' })
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 获取财务报表数据
    async handleGetUntreated(ev) {
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = { pageNum: this.currentPage,
        pageSize: this.size, search: this.searCollData.concat(this.details) }
      const { data: RES } = await queryPrdPlanAndRealReport(DATA)
      this.tableData = RES.list
      this.total = RES.total
    },
    // 搜索
    handleQuerySonClass(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.handleGetUntreated(ev.detail)
      } else {
        this.handleGetUntreated()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.inventoryPosting {
  @include listBom;
  padding: 0;
  .header{
    position:relative;
    .header-name{
      width: 100%;
    }
    .btn{
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
}
</style>
